<template lang="">
  <div class="center">
    <div class="main" style="border: 1px solid #fff;height: auto;background-color: #fff;border-radius: 10px;">
      <div class="title"
        style="text-align: left;margin-left: 30px;margin-top:30px;border-left: 3px solid #fe0100;width: 100px;height: 25px;">
        <h3 style="color:#fe0100 ;font-weight: 500;font-size: 18px;padding-left: 15px;">申请报销</h3>
      </div>
      <div class="bx" style="border: 0px solid #000;width: 550px;margin: 40px 20px;">
        <el-form :model="data" label-width="130px">
          <el-form-item label="选择报销类型" >
            <el-select v-model="data.reimburseType" clearable
              style="border:1px solid #b6b6b6;width: 200px;border-radius: 50px;overflow: hidden;">
              <el-option v-for="dictRow in reimburseTypeDict" :label="dictRow.dictValue" :value="dictRow.dictKey"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择项目">
             <el-select v-model="data.index" @change="getUserLinkman" clearable filterable 
              style="border:1px solid #b6b6b6;width: 200px;border-radius: 50px;overflow: hidden;">
                <el-option v-for="(item,index) in salesItem" :key="index" :label="item.businessName" :value="index">
              </el-option>            
            </el-select>
          </el-form-item>
          <el-form-item label="选择联系人">
            <el-select v-model="data.linkmanId" clearable
              style="border:1px solid #b6b6b6;width: 200px;border-radius: 50px;overflow: hidden;" clearable>
              <el-option v-for="item in linkmanList" :key="item.linkmanId" :label="item.name" :value="item.linkmanId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="金额">
            <el-input v-model="data.amount"
              style="border:1px solid #b6b6b6;width: 200px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="报销内容">
            <el-input v-model="data.describes" type="textarea"
              style="border:1px solid #b6b6b6;width: 400px;height:200px;border-radius: 10px;overflow: hidden;">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="addApplys" type="danger" class="button">确定</el-button>
            <el-button @click="addApplysCancel" type="danger" class="button">取消</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        salesItem: [],
        linkmanList: [],
        dataTable: [],
        List2: [],
        reimburseTypeDict:[],
        newsType: '报销',
        userId: '',
        customId: '',
        data: {
          reimburseType: '3',
          amount: '',
          describes: '',
          linkmanId: '',
          salesId: '',
        }
      }
    },
    mounted() {
      this.getChange()
      this.getReimburseType()
      // this.getUserLinkman()
    },
    methods: {
      addApplysCancel() {
        this.$router.push({
          path: '/apply'
        });
      },
      // 销售机会查询
      getChange() {
        var data = {
          salesStatus: '1',
          current: 1,
          size: 100,
        }
        this.$API.change.reqChangeDetails(data).then(res => {
          if (res.data.code == 200) {
            this.salesItem = res.data.data
            // this.getUserLinkman()
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
      // 报销类型
      getReimburseType(){
        var data = {
          dictVar: 'ReimburseType',
          current: 1,
          size: 100,
        }
        this.$API.dict.reqDictList(data).then(res => {
          if (res.data.code == 200) {
            this.reimburseTypeDict = res.data.data
            // this.getUserLinkman()
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
      // 联系人查询
      getUserLinkman(index) {
        if (index != null) {
          this.data.salesId = this.salesItem[index].salesId
        }
        var data = {
          customId: index == null ? null : this.salesItem[index].customId,
          current: 1,
          size: 100,
        }
        this.$API.linkman.reqLinkmanList(data).then(res => {
          if (res.data.code == 200) {
            this.linkmanList = res.data.data
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
      // 添加报销
      async addApplys() {
        // 解构出参数
        if (this.data.salesId == '') {
          this.$message("请选择报销项目")
        } else if (this.data.amount == '') {
          this.$message("请输入报销金额")
        } else if (this.data.describes == '') {
          this.$message("请输入报销内容")
        } else if (isNaN(Number(this.data.amount))) {
          this.$message("请输入正确的金额")
        } else {
          var userId = this.$cookies.get("userId");
          const {data,salesId } = this;        
          var datas = {
            reimburseType: data.reimburseType,
            amount: data.amount,
            describes: data.describes,
            salesId: data.salesId,
            userId: userId,
            linkmanId: data.linkmanId,
          }
          let result = await this.$API.apply.reqAddApply(datas);
          if (result.data.code == 200) {
            console.log(result.data.data)
            this.dataTable = result.data.data
            this.$message.success("添加成功！");
            this.$router.push({
              path: '/apply'
            });
            // this.addAddNews()
          } else {
            this.$message(result.data.message)
          }

        }
      },
      // 添加消息
      // addAddNews() {
      //   var data = this.List2;
      //   // var newsType = this.newsType
      //   this.$API.news.reqAddNews(data).then(res => {
      //     if (res.data.code == 200) {
      //       this.$message.success("添加成功！");
      //     } else {
      //       this.$message.error("添加失败！");
      //     }
      //   })

      // },

    },
    watch: {
      customId: {
        handler(newVal, oldVal) {
          this.customId = '';
          this.getUserLinkman();
        }
      },

    }
  }

</script>
<style scoped>
  @import "../../../style/style.css";

  .bx>>>.el-form-item__content {
    width: 220px !important;
  }

  .bx>>>.el-form-item__label {
    font-size: 16px;
  }

  .bx>>>.el-textarea__inner {
    height: 200px;
  }

  .bx>>>.el-input__suffix {
    left: 150px;

  }

  .bx>>>.el-input__inner {
    width: 200px;
  }
</style>